<!--学.考核ITEM-->
<script setup lang="ts">
import lightIcon from '../../assets/checked.png';
import unLightIcon from '../../assets/learning.png';

const getIcon = (status:Boolean) => {
  return status ? lightIcon : unLightIcon
}
const props = defineProps(['data'])
</script>

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 20px">
  <div v-for="(element,index) in props.data" class="mainStyle" :class="{'unMainStyle':element.learned}" :key="index">
    <img :src="getIcon(element.learned)" style="margin-top: 20px" width="40px" height="40px">
    <div class="fontStyle" style="margin-top: 10px">{{element.content}}</div>
    <el-button :class="{'custom-button':element.learned}" :disabled="element.learned"  type="primary" style="font-size: 16px;font-weight: bold;margin-top: 50px">去考试</el-button>
  </div>
  </div>
</template>

<style scoped>

.el-button--primary{
  --el-button-bg-color:#2EC3BD;
  --el-button-hover-bg-color:#35D8D2;
  --el-button-border-color:#35D8D2;
}

.custom-button {
  background: linear-gradient(to right, #AEAEAE, #737373) !important;
  border: none !important; /* 去除按钮边框 */
  color: white !important; /* 按钮文字颜色 */
}


.fontStyle{
  font-weight: bold;
  font-size: 20px;
}
.mainStyle{
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url('../../assets/line_big_frame.png'),
  linear-gradient( 180deg, #C1F4F2 100%, #C1F4F2 100%);
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: center; /* 居中背景图片 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  width: 170px;
  height: 200px;
  border-radius: 6px;
  padding: 8px 20px;
}

.unMainStyle{
  background: url('../../assets/line_small_frame.png'),
  linear-gradient(to right, #F2F2F2 100%, #E0E0E0 100%)  !important;
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: center; /* 居中背景图片 */
  background-repeat: no-repeat; /* 不重复背景图片 */
}

</style>